<template>
  <XcDrawer ref="drawer" :title="$t('page.schedule.name')" :width="960" :closable="true" :closeconfirm="false">
    <List v-if="schedule" border>
      <ListItem>
        <span class="list-title">{{$t('page.schedule.schtb.name')}}:</span><span class="ml-5 mr-15">{{schedule.name}}</span>
        <StatusBadge v-if="!schedule.post" :content="$t('page.schedule.schtip.' + (schedule.status[0]==='processing'?'statuson':'statusoff'))" :badge="schedule.status[0]" :status="schedule.status[2]" :statuschangable="false">
          <Time :time="schedule.nextTime" :interval="1" />
        </StatusBadge>
        <span v-if="!schedule.post" class="ml-5">{{$t('page.schedule.schtb.nextTime')}}: {{schedule.nextTime}}</span>
        <template slot="action">
          <Button v-if="!schedule.post" type="primary" @click="onRunNow">{{$t('page.schedule.execute')}}</Button>
        </template>
      </ListItem>
      <ListItem>
        <span class="list-title">{{$t('form.remark')}}:</span> <span class="ml-5">{{schedule.remark}}</span>
      </ListItem>
    </List>
    <List class="mt-15" v-if="schedule" border>
      <ListItem>
        <span class="list-title">{{$t('page.schedule.schtb.cron')}}:</span><span class="ml-5">{{schedule.cron}}</span>
      </ListItem>
      <ListItem>
        <span class="list-title">{{$t('page.schedule.schtb.task')}}:</span><span class="ml-5">{{schedule.task}}</span>
      </ListItem>
      <ListItem>
        <span class="list-title">{{$t('page.schedule.view.group')}}:</span><span class="ml-5">{{schedule.group?schedule.group:$t('page.schedule.view.groupall')}}</span>
      </ListItem>
      <ListItem>
        <span class="list-title">{{$t('page.schedule.view.params')}}:</span><span class="ml-5">{{schedule.params}}</span>
      </ListItem>
    </List>
    <Alert class="mt-15" type="success" show-icon> {{paralleltip}} </Alert>
    <TaskView :header="$t('page.schedule.tasktb.header_latest')" :loading="tasks.loading" :tasks="tasks.list" @onRefresh="loadLatestTasks" class="mt-15" />
  </XcDrawer>
</template>
<script>
  import XcDrawer from '@/components/xcdrawer'
  import StatusBadge from '@/components/statusbadge'
  import TaskView from './taskview'
  export default {
    name: 'comp-schedule-view',
    components: { XcDrawer, StatusBadge, TaskView },
    data() {
      return {
        schedule: {
          parallel: 1,
          nextTime: 0,
          status: ['default', '', 'off']
        },
        paralleltip: '',
        tasks: {
          loading: true,
          list: []
        }
      }
    },
    methods: {
      show(schedule) {
        let parallel = schedule.parallel || 1
        if (parallel > 1) {
          this.paralleltip = this.$t('page.schedule.view.parallelmulti', { parallel })
        } else {
          this.paralleltip = this.$t('page.schedule.view.parallel')
        }
        this.schedule = schedule
        this.$refs.drawer.show()
        // 加载最近的任务执行记录
        this.loadLatestTasks()
      },
      loadLatestTasks() {
        if (!this.schedule.name) return
        this.tasks.loading = true
        this.$md.dispatch('schedule_task_latest', { data: this.schedule.name }).then(data => {
          if (data.retCode === 1) {
            let tasks = data.data || []
            this.tasks.list = tasks
          }
          this.tasks.loading = false
        })
      },
      onRunNow() {
        this.$Modal.confirm({
          title: this.$t('status.handlemodel.title'),
          content: this.$t('status.handlemodel.content'),
          onOk: () => {
            this.$md.dispatch('schedule_runnow', { data: this.schedule.name }).then(data => {
              if (data.retCode === 1) {
                this.$Message.success(this.$t('submitok'))
                this.loadLatestTasks()
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .list-title {
    min-width: 100px;
    font-weight: 600;
  }
</style>
